<section class="page report-detail-page">
  <div class="title">
      {{reportId?'编辑周报':'新建周报'}}
  </div>
  <nz-card>
    <ng-template #extra style="margin-bottom:10px">
      <button nz-button [nzType]="'primary'" (click)="saveReport()" *ngIf="!reportId">
        <span>创建</span>
      </button>
      <button nz-button [nzType]="'primary'" (click)="saveReport()" *ngIf="reportId">
        <span>更新</span>
      </button>
      <button nz-button [nzType]="'primary'" routerLink="/report-manage">
        <span>返回</span>
      </button>
    </ng-template>
    <ng-template #body>
      <form nz-form nzLayout="horizontal" [formGroup]="reportForm">
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSpan]="3">
            <label>周报日期</label>
          </div>
          <div nz-form-control nz-col [nzSpan]="12" [nzValidateStatus]="reportForm.controls.date">
            <nz-select style="width: 180px;" formControlName="date" [nzPlaceHolder]="'请选择需要提交的周报日期'">
              <nz-option *ngFor="let option of dateOptions" [nzLabel]="option.label" [nzValue]="option" [nzDisabled]="option.disabled">
              </nz-option>
            </nz-select>
            <div nz-form-explain *ngIf="reportForm.controls.date.dirty&&reportForm.controls.date.hasError('required')">
              周报日期
            </div>
          </div>
        </div>
        <div nz-form-label nz-col [nzSpan]="3">
          <label>团队</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="12" [nzValidateStatus]="reportForm.controls.team">
          <nz-select style="width: 180px;" formControlName="team" [nzPlaceHolder]="'请选择需要提交的周报团队'">
            <nz-option *ngFor="let option of teamOptions" [nzLabel]="option.name" [nzValue]="option">
            </nz-option>
          </nz-select>
          <div nz-form-explain *ngIf="reportForm.controls.date.dirty&&reportForm.controls.date.hasError('required')">
            请选择提交周报的团队
          </div>
        </div>
      </form>
    </ng-template>
  </nz-card>


  <!-- 上周任务完成情况 -->
  <nz-card *ngIf="reportObject">
    <ng-template #title>
      上周任务完成情况
    </ng-template>
    <ng-template #extra>
      <button nz-button [nzType]="'primary'" (click)="showTaskDialog(taskContent,'complete')">
        <span>添加</span>
      </button>
    </ng-template>
    <ng-template #body>
      <nz-table #nzTable [nzAjaxData]="completeDataSet" [nzIsPagination]="false" [nzScroll]="{y:300}">
        <thead nz-thead>
          <tr>
            <th nz-th>
              <span>内容</span>
            </th>
            <th nz-th>
              <span>项目</span>
            </th>
            <th nz-th>
              <span>负责人</span>
            </th>
            <th nz-th>
              <span>完成度</span>
            </th>
            <th nz-th>
              <span>备注</span>
            </th>
            <th nz-th>
              <span>操作</span>
            </th>
          </tr>
        </thead>
        <tbody nz-tbody>
          <tr nz-tbody-tr *ngFor="let data of nzTable.data">
            <td nz-td>{{data.content}}</td>
            <td nz-td>{{data.project}}</td>
            <td nz-td>{{data.user}}</td>
            <td nz-td>{{data.complete}}</td>
            <td nz-td>{{data.remark}}</td>
            <td nz-td>
              <a (click)="showAuthDialog(authContent,data.object)">审核</a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </ng-template>
  </nz-card>

  <!-- 本周计划任务 -->
  <nz-card *ngIf="reportObject">
    <ng-template #title>
      本周计划任务
    </ng-template>
    <ng-template #extra>
      <button nz-button [nzType]="'primary'" (click)="showTaskDialog(taskContent,'plan')">
        <span>添加</span>
      </button>
    </ng-template>
    <ng-template #body>
      <nz-table #nzTable [nzAjaxData]="planDataSet" [nzIsPagination]="false" [nzScroll]="{y:300}">
        <thead nz-thead>
          <tr>
            <th nz-th>
              <span>内容</span>
            </th>
            <th nz-th>
              <span>项目</span>
            </th>
            <th nz-th>
              <span>负责人</span>
            </th>
          </tr>
        </thead>
        <tbody nz-tbody>
          <tr nz-tbody-tr *ngFor="let data of nzTable.data">
            <td nz-td>{{data.content}}</td>
            <td nz-td>{{data.project}}</td>
            <td nz-td>{{data.user}}</td>
          </tr>
        </tbody>
      </nz-table>
    </ng-template>
  </nz-card>
</section>

<!--任务表单-->
<ng-template #taskContent>
  <form nz-form nzLayout="horizontal" [formGroup]="taskForm">
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="3">
        <label>所属项目</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="10" [nzValidateStatus]="taskForm.controls.project">
        <nz-select style="width: 180px;" formControlName="project" [nzPlaceHolder]="'请选择该任务所属的项目'">
          <nz-option *ngFor="let option of projectOptions" [nzLabel]="option.name" [nzValue]="option.object">
          </nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="taskForm.controls.project.dirty&&taskForm.controls.project.hasError('required')">
          请输入项目名称
        </div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="3">
        <label>指派成员</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="10" [nzValidateStatus]="taskForm.controls.user">
        <nz-select style="width: 180px;" formControlName="user" [nzPlaceHolder]="'请选择该任务所属的项目'">
          <nz-option *ngFor="let option of userOptions" [nzLabel]="option.realname" [nzValue]="option.object">
          </nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="taskForm.controls.user.dirty&&taskForm.controls.user.hasError('required')">
          请选择指派成员
        </div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="3">
        <label>完成日期</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="10" [nzValidateStatus]="taskForm.controls.date">
        <nz-datepicker style="width: 180px;" formControlName="date" [nzPlaceHolder]="'选择任务完成日期'"></nz-datepicker>
        <div nz-form-explain *ngIf="taskForm.controls.date.dirty&&taskForm.controls.date.hasError('required')">
          选择任务完成日期
        </div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="3">
        <label>任务内容</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="21" [nzValidateStatus]="taskForm.controls.content">
        <nz-input [nzRows]="5" nzType="textarea" formControlName="content" [nzPlaceHolder]="'内容'" [nzSize]="'large'">
        </nz-input>
        <div nz-form-explain *ngIf="taskForm.controls.content.dirty&&taskForm.controls.content.hasError('required')">
          请输入任务内容
        </div>
      </div>
    </div>
  </form>
</ng-template>


<!--审核表单-->
<ng-template #authContent>
  <form nz-form nzLayout="horizontal" [formGroup]="authForm">
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="3">
        <label>完成情况</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="21" [nzValidateStatus]="authForm.controls.complete">
        <nz-select style="width: 180px;" formControlName="complete" [nzPlaceHolder]="'请选择任务的完成情况'">
          <nz-option *ngFor="let option of completeOptions" [nzLabel]="option.label" [nzValue]="option.value">
          </nz-option>
        </nz-select>
        <div nz-form-explain *ngIf="authForm.controls.complete.dirty&&authForm.controls.complete.hasError('required')">
          请选择完成情况
        </div>
      </div>
    </div>
    <div nz-form-item nz-row>
      <div nz-form-label nz-col [nzSpan]="3">
        <label>备注</label>
      </div>
      <div nz-form-control nz-col [nzSpan]="21" [nzValidateStatus]="authForm.controls.remark">
        <nz-input [nzRows]="5" nzType="textarea" formControlName="remark" [nzPlaceHolder]="'备注'" [nzSize]="'large'">
        </nz-input>
        <div nz-form-explain *ngIf="authForm.controls.remark.dirty&&authForm.controls.remark.hasError('required')">
          请输入备注信息
        </div>
      </div>
    </div>
  </form>
</ng-template>
